export default {
  backgroundColor: 'rgba(0, 0, 0, 0)',
  color: ['#0063FF'],
  grid: {
    top: 30,
    left: 0,
    bottom: 70,
    containLabel: true
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    },
    formatter (params) {
      // let DEFAULT_TIME_UNIT = ['时', '分', '秒']
      let color = ['#006dff', '#2acc85']
      let res = ''
      for (let i = 0; i <= params.length - 1; i++) {
        let value = ''
        if (params[i].seriesName === '区域总客流') {
          value = params[i].value + '人'
        } else if (params[i].seriesName === '人均停留时长') {
          const hourStr = Math.floor(params[i].value / (60 * 60))
          const minuteStr = Math.floor(params[i].value % (60 * 60) / 60)
          const secondStr = Math.floor(params[i].value % (60 * 60) % 60)
          value = `${hourStr ? hourStr + '时' : ''} ${minuteStr ? minuteStr + '分' : ''} ${secondStr}秒`
        }
        res += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + color[i] + '"></span>' +
          params[i]['seriesName'] + ':' + value + '</br>'
      }
      res = params[0]['axisValue'] + '</br>' + res
      return res
    }
  },
  graphic: [
    {
      type: 'text',
      left: 'center',
      top: 'middle',
      z: 1,
      style: {
        text: '暂无数据',
        fill: 'transparent'
      }
    }
  ],
  legend: {
    data: ['区域总客流', '人均停留时长'],
    textStyle: {
      color: '#000'
    }
  },
  xAxis: [
    {
      type: 'value',
      splitLine: {
        show: false
      },
      // name: '人数',
      axisTick: {
        show: true,
        lineStyle: {
          color: '#999'
        }
      },
      axisLabel: {
        show: false,
        color: '#999'
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#999'
        }
      }
    },
    {
      type: 'value',
      splitLine: {
        show: false
      },
      // name: '停留时间',
      axisTick: {
        show: false
      },
      axisLabel: {
        show: false
      },
      axisLine: {
        show: false
      }
    }
  ],
  yAxis: {
    type: 'category',
    data: [
      '办公室',
      '茶水间',
      '入口',
      '研发中心',
      '支持中心',
      '会议室'
    ],
    axisTick: {
      lineStyle: {
        color: '#999'
      }
    },
    axisLabel: {
      color: '#000',
      fontSize: 11
    },
    axisLine: {
      show: true,
      lineStyle: {
        color: '#999'
      }
    }
  },
  series: [
    {
      name: '区域总客流',
      type: 'bar',
      barMaxWidth: 50,
      barGap: '10%',
      itemStyle: {
        normal: {
          color: '#006dff'
        }
      },
      label: {
        normal: {
          show: true,
          position: 'right',
          color: '#999',
          formatter: '{c}人'
        }
      }
    },
    {
      name: '人均停留时长',
      type: 'bar',
      xAxisIndex: 1,
      barMaxWidth: 50,
      barGap: '10%',
      itemStyle: {
        normal: {
          color: '#2acc85'
        }
      },
      label: {
        normal: {
          show: true,
          position: 'right',
          color: '#999',
          formatter ({ value }) {
            const hourStr = Math.floor(value / (60 * 60))
            const minuteStr = Math.floor(value % (60 * 60) / 60)
            const secondStr = Math.floor(value % (60 * 60) % 60)
            return `${hourStr ? hourStr + '时' : ''} ${minuteStr ? minuteStr + '分' : ''} ${secondStr}秒`
          }
        }
      }
    }
  ]
}
